<html>
<head>
    <meta charset="UTF-8" />
    <title>储能监控云平台</title>
    <link type="text/css" rel="stylesheet" th:href="@{/ace/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrapValidator.min.css}">
    <script th:src="@{/ace/js/jquery-2.1.4.min.js}"></script>
    <script th:src="@{/ace/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrapValidator.min.js}"></script>
    <style>
        .login_box {
            width: 360px;
            background-color: #fff;
            opacity: 0.8;
            filter: alpha(opacity=80);
            border-radius: 10px;
            position: absolute;
            left: 50%;
            top: 30%;
            margin-left: -180px;
            box-shadow: 0 0 30px #8EA2AD;
            padding: 20px 30px;
        }
        .bj-log{
            background: url('/ace/images/gaoqin-bj.jpg')
        }
        .text-err{
            height: 20px;
            color:red;
            text-indent: 20px;
        }
    </style>


</head>
<body class="bj-log">
    <form id="login" action="" method="post" role="form">
        <div class="login_box">
            <h3 class="text-center">储能监控云平台</h3>
            <div style="height: 60px">
                <div class="form-group">
                         <input type="text" class="form-control" name="username"
                               placeholder="请输入用户名">
                </div>
            </div>
            <div style="height: 60px">
                <div class="form-group">
                    <input type="password" class="form-control" name="password"
                           placeholder="请输入密码">
                </div>
            </div>
            <!------------------------------------------ 验证码 ------------------------------------------>
            <div style="height: 60px">
                <div class="form-group">
                    <input type="text" class="form-control" name="captcha" id="captcha"
                           placeholder="请输入验证码">
                    <img id="kaptcha" src="captcha" onclick="reGetCode();" title="重新获取验证码" width="80"
                         style=" position: absolute; height: 30px; top: 2px; left: 195px;"/>
                </div>
            </div>
            <!------------------------------------------ 验证码 ------------------------------------------>
            <p class="text-err" th:text="${error_msg}"></p>
            <div class="text-center">
                <button type="submit" class="btn btn-primary btn-lg">登陆</button>
            </div>
        </div>
    </form>
<script>
    $(function () {

        $("input").on({
            focus:function(){
                $(".text-err").text("");
            }
        })

        $("#login").bootstrapValidator({
            live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
            excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
            //submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
            message: '通用的验证失败消息',//好像从来没出现过
            feedbackIcons: {//根据验证结果显示的各种图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '用户名不能为空'
                        },
                        stringLength: {//检测长度
                            min: 5,
                            max: 30,
                            message: '用户名长度必须在6-30之间'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '密码不能为空'
                        }
                    }
                },
                captcha:{
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '请填写验证码'
                        }
                    }
                }
            }
        });
        // $("#btn-test").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        //     $("#form-test").bootstrapValidator('validate');//提交验证
        //     if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
        //         alert("yes");//验证成功后的操作，如ajax
        //     }
        // });

    });

    /**
     * 重新获取验证码
     */
    function reGetCode() {
        var kaptcha = document.getElementById("kaptcha");
        kaptcha.src = "captcha?d=" + new Date() * 1;
    }
</script>
</body>
</html>
